<template>
  <!--头部-->
  <van-nav-bar title="我的地址" left-text="" left-arrow @click="onClickLeft()" />
  <!--body 判断列表数据是否为空-->
  <div class="delivery-addresses-container" v-if="nikname">
    <div v-for="(item, index) in list" :key="index" class="addressbox">
      <!--左边字体-->
      <div style="float: left; width: 70%; height: 100%">
        <p>{{ item.nickname }}&emsp;&emsp;{{ item.tel }}</p>
        <p>{{ item.detail_address }}</p>
      </div>
      <!--右边按钮-->
      <div style="float: right; width: 15%; line-height: 40px">
        <van-button type="primary" size="mini" @click="onEdit()">编辑</van-button>
      </div>
    </div>
    <div class="delivery-addresses-container">
      <!--地址-->
      <div v-for="(item, index) in newlist" :key="index" class="addressbox">
        <div style="float: left; width: 70%; height: 100%">
          <p>{{ item.nickname }}&emsp;&emsp;{{ item.tel }}</p>
          <p>{{ item.detail_address }}</p>
        </div>
        <div style="float: right; width: 15%; line-height: 40px">
          <van-button type="primary" size="mini" @click="onEdit()">编辑</van-button>
        </div>
      </div>
    </div>
    <!--新增地址-->
    <div class="add-address-button">
      <button @click="onAdd()">新增地址</button>
    </div>
  </div>
  <div v-else>
    <van-empty description="暂无地址" />
    <div class="add-address-button">
      <button @click="onAdd()">新增地址</button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
import _ from 'lodash'
// 判断是否有昵称，如果没有则显示空状态
const nikname = ref(localStorage.getItem('nickname'))
const nameaddress = ref(localStorage.getItem('newaddress'))
const nameaddressa = ref(localStorage.getItem('newaddressa')) 
console.log(nameaddress, nameaddressa)
//列表数据
const list = [
  {
    nickname: '张三',
    tel: '12345678901',
    detail_address: '广东省深圳市南山区科技中一路深业科技园A座201'
  }
]
const newlist = [
  {
    nickname: '李四',
    tel: '12345678901',
    detail_address: '广东省深圳市南山区科技中一路深业科技园A座201'
  }
]
//防抖和节流函数
const navigateToAddAddressPagea = () => {
  console.log('这是防抖函数')
  //这里可以替换为实际的跳转逻辑
}
const navigateToAddAddressPageb = () => {
  console.log('这是节流函数')
  // 这里可以替换为实际的跳转逻辑
}
//创建防抖函数
const debouncedNavigate = _.debounce(navigateToAddAddressPagea, 1000)
//创建节流函数
const throttledNavigate = _.throttle(navigateToAddAddressPageb, 3000)
//新增地址和编辑地址跳转页面
const onAdd = () => {
  throttledNavigate()
  router.push('/add-address')
}
const onEdit = () => {
  throttledNavigate()
  router.push('/edit-address')
}
//返回上一页按钮事件处理函数
const onClickLeft = () => {
  debouncedNavigate()
  router.go(-1)
}
</script>
<style>
html {
  display: block;
  background: whitesmoke !important;
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.back-icon {
  padding: 10px;
  cursor: pointer;
}
.title {
  text-align: center;
}
.van-button--primary {
  background: greenyellow !important;
  color: whitesmoke !important;
  border: none;
}
.addressbox {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  margin-top: 20px;
  width: 100%;
  padding: 10px;
  background-color: #fff;
}
.addressbox p {
  font-size: 14px;
}
.add_address {
  display: flex;
  justify-content: center;
}
.add-address-button {
  width: 100%;
  margin-top: 20px;
  position: fixed;
  display: flex;
  bottom: 0.1rem;
  z-index: 999;
}
.add-address-button button {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  width: 100%;
  height: 40px;
}
</style>
